<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title">当前城市</div>
                <div class="button-list">
                    <div class="button">{{this.$store.state.city}}</div>
                </div>
            </div>
            <div class="area">
                <div class="title">热门城市</div>
                <div class="button-list">
                    <div 
                        class="button" 
                        v-for="item of hotCities" 
                        :key="item.id"
                        @click="handleCityClick(item.name)"
                    >
                        {{item.name}}
                    </div>
                </div>
            </div>
            <div 
                class="area" 
                v-for="(obj,key) of cities" 
                :key="key"
                :ref="key"
            >
                <div class="title">{{key}}</div>
                <div class="item-list">
                    <div 
                        class="item" 
                        v-for="item of obj" 
                        :key="item.id"
                        @click="handleCityClick(item.name)"
                    >
                        {{item.name}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BetterScroll from 'better-scroll'   

export default {
    name:"List",
    props : {
        cities:Object,
        hotCities:Array,
        letter:String
    },
    methods:{
        handleCityClick(city){
            console.log(888)
            this.$store.commit('changeCity',city)
            // this.$store.dispatch('changeCity',city)
            this.$router.push('/')
        }
    },
    watch:{
        letter (){
            const ele = this.$refs[this.letter][0];
            this.scroll.scrollToElement(ele) 
        }
    },
    mounted (){
        this.scroll = new BetterScroll(this.$refs.wrapper, {
            movable: false, 
            zoom: false
        })
    }
}
</script>

<style lang="less" scoped>
.list{
    overflow: hidden;
    position: absolute;
    top: 1.58rem;
    left: 0;
    right: 0;
    bottom: 0;
    .title{
        line-height: .56rem;
        background: #eee;
        color: #000;
        font-size: .28rem;
    }
    .button-list{
        // padding: .1rem .6rem;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        .button{
            width: 33%;
            font-size: .30rem;
            text-align: center;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            line-height: .9rem;
        }
        .button:nth-child(3n){
            border-right: none;
        }
    }
    .item{
        line-height: .72rem;
        font-size: .28rem;
        padding-left: .2rem;
        border-bottom: 1px solid #ccc;
    }
}
</style>